<template>
    <van-pull-refresh 
        :modelValue="refreshing" 
        @update:modelValue="emits('update:refreshing', $event)" 
        @refresh="onRefresh"
    >
        <van-list 
            :loading="loading" 
            @update:loading="emits('update:loading', $event)" 
            :finished="finished" 
            finished-text="没有更多了" 
            @load="onLoad"
        >
            <slot></slot>
        </van-list>
    </van-pull-refresh>
</template>

<script lang="ts" setup>
    import { markRaw, reactive, ref, toRaw, onMounted } from 'vue'
    import type { Ref } from 'vue'
    const props = withDefaults(defineProps<{
        refreshing?: boolean,
        loading?: boolean,
        finished?: boolean,
        list?: Array<any>,
    }>(), {
        refreshing: false,
        loading: false,
        finished: false,
        list: () => [],
    })
    const emits = defineEmits<{
        (e:'update:refreshing', data: any): void
        (e:'update:loading', data: any): void
        (e:'update:finished', data: any): void
        (e:'update:list', data: any): void
        (e:'load', callback: any): void
    }>()
    
    const onLoad = () => {
        if (props.refreshing) {
            emits('update:list', [])
            emits('update:refreshing', false)
		}
        emits('load', (val) => {
            console.log(val)
            emits('update:loading', false)
            if (val) {
                emits('update:finished', true)
            }
        })

    }

    const onRefresh = () => {

        // 清空列表数据
        emits('update:finished', false)
	
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        emits('update:loading', true)
        
        onLoad();
    };

</script>

<style lang="scss" scoped>
    :deep(.van-cell__title){
        flex: 3 !important;
    }
    :deep(.van-cell__value){
        flex: 1 !important;
    }
</style>